<template>
  <div class="template2" :style="'padding:'+height+'px 0px 60px 0px;'">
    <el-container>
      <div class="head" id="head1">
        <div class="tit">订单列表
        </div>
        <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">
          <el-form-item prop="housesName">
            <el-autocomplete size="mini" style="width:150px;" :maxlength='10' class="inline-input" v-model="formInline.houseName" :fetch-suggestions="querySearch" placeholder="小区名称" :trigger-on-focus="false" @select="handleSelect"></el-autocomplete>
          </el-form-item>
          <el-form-item prop="deliveryStatus">
            <el-select size="mini" style="width:100px;" v-model="formInline.deliveryStatus" placeholder="交付状况" clearable>
              <el-option label="精装" value="1"></el-option>
              <el-option label="毛坯" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="customer">
            <el-input size="mini" style="width:100px;" :maxlength='10' v-model="formInline.customer" placeholder="业主姓名"></el-input>
          </el-form-item>
          <el-form-item prop="phone">
            <el-input size="mini" style="width:110px;" :maxlength='11' v-model="formInline.phone" placeholder="业主手机号"></el-input>
          </el-form-item>
          <el-form-item prop="adminName">
            <el-autocomplete size="mini" style="width:100px;" :maxlength='10' class="inline-input" v-model="formInline.adminName" :fetch-suggestions="querySearchAdmin" placeholder="管家姓名" :trigger-on-focus="false" @select="handleSelectA" ></el-autocomplete>
          </el-form-item>
          <el-form-item prop="score">
            <el-select size="mini" style="width:100px;" v-model="formInline.score" placeholder="评价" clearable>
              <el-option label="1星" value="1"></el-option>
              <el-option label="2星" value="2"></el-option>
              <el-option label="3星" value="3"></el-option>
              <el-option label="4星" value="4"></el-option>
              <el-option label="5星" value="5"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="date">
            <el-date-picker size="mini" v-model="formInline.date" type="daterange" style="width:210px;" clearable value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            <!-- <el-date-picker size="mini" style="width:130px;" v-model="formInline.getHomeDate" type="date" placeholder="报告完成时间"> </el-date-picker> -->
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
            <span @click="resetForm('formInline')" class="reset">
              <i class="icon iconfont icon-icon901"></i> 重置
            </span>
          </el-form-item>
        </el-form>
      </div>
      <el-main style="height:100%">
        <reportListList></reportListList>
      </el-main>
      <el-footer id="foot">
        <el-pagination size="mini" background layout="total,sizes,prev, pager, next" @size-change="sizeChange" :current-page="obj.page" @current-change="page" :total="listNum" :page-sizes="[20, 30, 50, 100]"></el-pagination>
      </el-footer>
    </el-container>
    <seeReport></seeReport>
  </div>
</template>
<script> 
import reportListList from './reportListList.vue'
import seeReport from './seeReport.vue'
import { request } from "../../assets/request.js";
export default {
  data() {
    return {
      height: 0,
      formInline: {
        deliveryStatus:'',//交付状况
        houseName:'',//小区名称
        adminName:'',//管家姓名
        score:'',  //满意度
        customer:'',      //业主姓名
        phone:'',     //业主手机号
        date:[],
      },
      obj:{
        page:1,
        size:20,
      },
      listNum:10,
      date:''
    };
  },
  created() {
    this.loadAll();
    this.adminAll();
    this.$root.$on("reportList",data=>{
      this.listNum=data
    })
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    onSubmit() {   //搜索查询
      let formInline=this.formInline
      let aa=this.obj
      console.log(formInline)
      let obj={
        houseName:formInline.houseName,
        customer:formInline.customer,
        phone:formInline.phone,
        adminName:formInline.adminName,
        score:formInline.score,
        page:aa.page,
        size:aa.size,
      }
      if(formInline.deliveryStatus){
        obj.deliveryStatus=parseInt(formInline.deliveryStatus)
      }
      if(formInline.date[0] && formInline.date[1]){
        obj.beginDate=formInline.date[0]
        obj.endDate=formInline.date[1]
      }else{
        obj.beginDate=''
        obj.endDate=''
      }
      console.log(obj)
      this.$root.$emit('searchReport',obj) 
    },
    pedestalList(){
      this.$root.$emit("pedestalList",'no')
    },
    page(e){ //页码
      let obj=this.obj;
      obj.page=e
      this.$root.$emit('searchReport',obj) 
    },
    sizeChange(e){ //每页数量
      let obj=this.obj;
      obj.size=e
      obj.page=1
      this.$root.$emit('searchReport',obj) 
    },
    querySearch(queryString, cb) { //楼盘
      var restaurants = this.restaurants; 
      var len = restaurants.length;
      var arr = [];
      for(var i=0;i<len;i++){
          //如果字符串中不包含目标字符会返回-1
          if(restaurants[i].value.indexOf(queryString)>=0){
              arr.push(restaurants[i]);
          }
      }
      cb(arr);
    },
    loadAll() { //查询所有楼盘
      let url = "houses/all";
      let that=this   //解决this指向问题
      request.ajaxGet({
        url,
        that,
        fn(res){
          for(let i in res){
            res[i].value=res[i].name
          }
          that.restaurants=res
          that.$store.state.property=res
        }
      })
    },
    adminAll() { //查询所有平台员工
      let url = "admin";
      let that=this   //解决this指向问题
      request.ajaxGet({
        url,
        that,
        fn(res){
          // console.log(res.list);
          let data=res.list;
          for(let i in data){
            data[i].value=data[i].realName
          }
          that.admins=data
        }
      })
    },
    querySearchAdmin(queryString, cb) { //所有员工筛选
      var restaurants = this.admins;
      var len = restaurants.length;
      var arr = [];
      for(var i=0;i<len;i++){
          //如果字符串中不包含目标字符会返回-1
          if(restaurants[i].value.indexOf(queryString)>=0){
              arr.push(restaurants[i]);
          }
      }
      cb(arr);
    },
    handleSelectA(item) { //选中员工
      let formInline=this.formInline
      formInline.adminName=item.realName
    },
    handleSelect(item) { //选中小区名称
      console.log(item);
      let formInline=this.formInline
      formInline.houseName=item.name
    }
  },
  mounted() {
    let headH = document.getElementById("head1").offsetHeight;
    this.height=headH
  },
  components:{
    reportListList,   //订单列表
    seeReport,   //查看订单
  },
};
</script>
<style scoped lang="less">
@import "../template2.less";
</style>